<template>
  <div class="client-container">
    <!-- 标题部分 -->
    <div class="title-section">
      <h2>不同的客户，共同的选择</h2>
    </div>

    <!-- 客户logo展示区域 -->
    <div class="client-grid">
      <div 
        v-for="(client, index) in clients" 
        :key="index" 
        class="client-item"
      >
        <div class="client-wrapper">
          <div class="logo-placeholder">
            <span>{{ client.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const clients = ref([
  { name: '国家管网' },
  { name: '当阳市人民政府' },
  { name: '东风汽车' },
  { name: '中船重工' },
  { name: '中国能建' },
  { name: '交通银行' },
  { name: '中国南方电网' },
  { name: '武汉地铁' },
  { name: '湖北交投' },
  { name: '湖北疾控' },
  { name: '榆能集团' },
  { name: '中国光谷' },
  { name: '中国信科' }
])
</script>

<style scoped lang="scss">
.client-container {
  padding: 60px 0;
  max-width: 1200px;
  margin: 0 auto;

  .title-section {
    text-align: center;
    margin-bottom: 60px;
    
    h2 {
      font-size: 32px;
      margin-bottom: 16px;
    }
  }

  .client-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 0 20px;
    margin: 0 auto;

    .client-item {
      width: calc(20% - 40px);
      position: relative;
      
      &::before {
        content: '';
        display: block;
        padding-top: 100%; // 保持正方形比例
      }

      .client-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: rotate(45deg); // 旋转45度形成菱形
        overflow: hidden;
        
        .logo-placeholder {
          width: 100%;
          height: 100%;
          background-color: #f5f5f5;
          display: flex;
          align-items: center;
          justify-content: center;
          transform: rotate(-45deg) scale(1.42); // 反向旋转文字并放大以填充菱形
          transition: all 0.3s ease;
          
          span {
            color: #666;
            font-size: 14px;
            text-align: center;
            padding: 10px;
          }
          
          &:hover {
            background-color: #e0e0e0;
            transform: rotate(-45deg) scale(1.45); // 悬停时稍微放大
          }
        }
      }
    }
  }
}

// 响应式布局
@media screen and (max-width: 1024px) {
  .client-grid .client-item {
    width: calc(25% - 40px);
  }
}

@media screen and (max-width: 768px) {
  .client-grid .client-item {
    width: calc(33.33% - 40px);
  }
}

@media screen and (max-width: 480px) {
  .client-grid .client-item {
    width: calc(50% - 40px);
  }
}
</style>